<template>
  <div class="container-big wing-blank signup-page">
    <div class="alibaba-design" />
    <img class="ucan-image" src="https://gw.alicdn.com/tfs/TB1ExhcHxnaK1RjSZFBXXcW7VXa-1392-800.png">
    <h1 class="signup-title">展会名称</h1>
    <h2 class="signup-sub-title">展会文案介绍哈哈哈哈哈哈哈哈</h2>
    <p class="signup-form-desc">填写并验证手机号即可免费预约展会门票</p>

    <co-list form>
      <co-list-item>
        <co-input slot="right" v-model="mobile" class="signup-form-input" placeholder="输入手机号" type="number">
          <co-select slot="prepend" type="popup" searchPlaceholder="搜索" title="选择国家" v-model="countryCode" :data="countrys" class="signup-mobile-input">
            <template slot="selection" slot-scope="{ selects }">
              <span v-for="(item,index) in selects" :key="index">
                +{{ item.value }}
              </span>
            </template>
          </co-select>
        </co-input>
      </co-list-item>
      <co-list-item>
        <co-input slot="right" v-model="code" class="signup-form-input" placeholder="验证码" type="number">
          <co-button slot="append" class="sign-capthcha" :disabled="sended" @click="sendCode">
            {{ sendText }}
          </co-button>
        </co-input>
      </co-list-item>
    </co-list>
    <co-button color="primary" class="signup-submit" :loading="signuping" @click="submit" block>提交</co-button>

    <div class="signup-desc-wrapper">
      <h3 class="signup-desc-title">规则说明</h3>
      <ol>
        <li><span>1.</span>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</li>
        <li><span>2.</span>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</li>
        <li><span>3.</span>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</li>
      </ol>
    </div>
  </div>
</template>
<script>
import services from "../../api/profile";
import areas from "../infoEntry/areaCode";

export default {
  data() {
    return {
      mobile: "",
      countryCode: "86",
      countrys: areas.map(item => ({
        label: `${item.name} +${item.tel}`,
        value: item.tel
      })),
      code: "",
      sendText: "获取验证码",
      sended: false,
      signuping: false
    };
  },
  methods: {
    validMobile() {
      if (!this.mobile) {
        this.$toast("请输入手机号");
        return false;
      }
      return true;
    },
    validCode() {
      if (!this.code) {
        this.$toast("请输入验证码");
        return false;
      }
      return true;
    },
    countdown(count = 60) {
      if (count === 0) {
        this.sended = false;
        this.sendText = "重新发送";
        return;
      }
      this.sendText = `${count}s`;
      this.timer = setTimeout(() => {
        this.countdown(count - 1);
      }, 1000);
    },
    sendCode() {
      if (this.sended || !this.validMobile()) return;
      if (this.timer) clearTimeout(this.timer);
      this.sended = true;
      services
        .sendCode(this.mobile, this.countryCode)
        .then(() => {
          this.$toast("发送成功");
          this.countdown();
        })
        .catch(() => {
          this.sended = false;
          this.$toast("发送失败");
        });
    },
    submit() {
      if (!this.validMobile() || !this.validCode()) return;
      this.signuping = true;
      services
        .signin(this.mobile, this.countryCode, this.code)
        .then(res => {
          this.signuping = false;
          this.$router.replace(`/display/active/${this.mobile}`);
        })
        .catch(() => {
          this.signuping = false;
        });
    }
  }
};
</script>
<style lang="less">
.signup-page {
  padding-top: 0px;
  .alibaba-design {
    top: 30px;
  }
  .ucan-image {
    width: 100%;
    display: block;
  }

  .signup-title {
    font-size: 40px;
    color: white;
    text-align: center;
    margin: 0;
  }

  .signup-sub-title {
    font-size: 24px;
    color: white;
    opacity: 0.8;
    line-height: 33px;
    margin-top: 20px;
    margin-bottom: 48px;
    text-align: center;
  }
  .signup-form-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 22px;
    margin-bottom: 15px;
    margin-top: 0;
    text-align: left;
    padding-left: 24px;
  }

  .signup-form-input {
    padding: 0;
    &::after {
      content: none;
    }
    .co-input__element {
      padding-left: 15px;
    }
    .co-input__prepend {
      margin-right: 0;
    }
  }

  .signup-mobile-input {
    position: relative;
    padding: 0;
    padding-right: 15px;
    &::before {
      content: "";
      position: absolute;
      right: 0;
      height: 48px;
      top: 50%;
      margin-top: -24px;
      width: 1px;
      background-color: fade(#eee, 50%);
    }
    &::after {
      content: none;
    }
    .co-select__icon {
      display: none;
    }
  }

  .sign-capthcha {
    height: 100%;
    font-size: 24px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .signup-submit {
    margin-top: 30px;
  }

  .signup-desc-wrapper {
    margin-top: 40px;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 20px;
      width: 280px;
      border-bottom: 1px dotted rgba(255, 255, 255, 0.8); /*no*/
    }

    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 20px;
      width: 280px;
      border-bottom: 1px dotted rgba(255, 255, 255, 0.8); /*no*/
    }
    ol {
      font-size: 22px;
      line-height: 40px;
      text-align: left;
    }
  }
  .signup-desc-title {
    font-size: 22px;
    line-height: 40px;
    padding-left: 40px;
    padding-right: 40px;
  }
}
</style>
